<template>
  <div :class="wrapClasses">
    <template v-if="isEnter || isIcon">
      <Input
        ref="inputRef"
        :value="queryValue"
        :size="size"
        :disabled="disabled"
        :border="!showIconOnly"
        :placeholder="showIconOnly ? '' : placeholder"
        :clearable="clearable"
        @on-focus="showInput"
        @on-clear="clear"
        @on-enter="enter"
        @on-change="changeQuery"
      >
        <template v-slot:prefix>
          <i class="haloe-icon haloe-icon-search" @click="submit"></i>
        </template>
      </Input>
    </template>
    <template v-else>
      <InputGroup>
        <Select
          v-if="filterItems"
          :size="size"
          :filterable="filterable"
          :style="selectStyle"
          v-model="currentFiltervalue"
          :disabled="disabled"
          @on-change="change"
          transfer
        >
          <Option
            v-for="item in filterItems"
            :value="item.value"
            :disabled="item.disabled"
            :key="item.value"
          >
            {{ item.label }}
          </Option>
        </Select>
        <Input
          ref="inputRef"
          search
          enter-button
          :value="queryValue"
          :size="size"
          :disabled="disabled"
          :clearable="clearable"
          :placeholder="placeholder"
          @on-search="submit"
          @on-change="changeQuery"
        >
          <template v-slot:prepend v-if="prependLabel">
            <span>{{ prependLabel }}</span>
          </template>
        </Input>
      </InputGroup>
    </template>
  </div>
</template>
<script>
import { getCurrentInstance } from 'vue'
import { oneOf } from '../../utils/assist'
import Input from '../input/input.vue'
import InputGroup from '../input/input-group.vue'
import Select from '../select/select.vue'
import Option from '../select/option.vue'

const prefixCls = 'haloe-search'

export default {
  name: 'Search',
  components: {
    Input: Input,
    InputGroup: InputGroup,
    Select: Select,
    Option: Option,
  },
  props: {
    queryValue: {
      type: String,
      default: '',
    },
    isIcon: {
      type: Boolean,
      default: false,
    },
    isEnter: {
      type: Boolean,
      default: false,
    },
    size: {
      validator(value) {
        return oneOf(value, ['small', 'middle', 'large'])
      },
      default() {
        const global = getCurrentInstance().appContext.config.globalProperties
        return !global.$HALOE || global.$HALOE.size === ''
          ? 'large'
          : global.$HALOE.size
      },
    },
    filterItems: {
      type: Array,
      default: () => null,
    },
    filterValue: {
      type: [Object, Number, String],
      default: () => null,
    },
    filterable: {
      type: Boolean,
      default: false,
    },
    filterWidth: {
      type: [Number, String],
      default: 110,
    },
    prependLabel: {
      type: String,
      default: '',
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
  },
  emits: ['on-submit', 'on-select', 'on-clear', 'on-change', 'update:queryValue'],
  computed: {
    wrapClasses() {
      return [
        prefixCls,
        {
          [`${prefixCls}-filter`]: this.isFilter,
          [`${prefixCls}-disabled`]: this.disabled,
        },
      ]
    },
    isButton() {
      return !this.isEnter && !this.isIcon
    },
    isFilter() {
      return this.isButton && this.filterItems
    },
    selectStyle() {
      const style = this.isFilter ? { width: `${this.filterWidth}px` } : {}
      return style
    },
  },
  watch: {
    filterValue(val) {
      this.currentFiltervalue = val
    },
  },
  data() {
    return {
      currentFiltervalue: this.filterValue,
      showIconOnly: this.isIcon,
    }
  },
  mounted() {},
  methods: {
    showInput() {
      if (this.isIcon) {
        this.showIconOnly = false
        this.$nextTick(() => {
          this.$refs['inputRef'].$refs['input'].focus()
        })
      }
    },
    clear() {
      if (this.isIcon) {
        this.showIconOnly = true
      }
      this.$emit('on-clear', '')
      this.$emit('update:queryValue', '')
    },
    enter() {
      if (this.isIcon || this.isEnter) {
        this.$emit(
          'on-submit',
          this.$refs['inputRef'].currentValue,
          this.isFilter && this.currentFiltervalue
        )
      }
    },
    submit() {
      if (this.isIcon && this.showIconOnly) {
        this.showIconOnly = false
        this.$nextTick(() => {
          this.$refs['inputRef'].$refs['input'].focus()
        })
      } else {
        this.$emit(
          'on-submit',
          this.$refs['inputRef'].currentValue,
          this.isFilter && this.currentFiltervalue
        )
      }
    },
    change(value) {
      this.currentFiltervalue = value
      this.$emit('on-select', value)
    },
    changeQuery(event){
      this.$emit('on-change', event.target.value)
      this.$emit('update:queryValue', event.target.value)
    }
  },
}
</script>
